<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!-- 修改简单数据类型
在vue的响应式原理中,只要data中的某个值发生的改变,异地的那个就能更新视图 修改基本类型值都是重新赋值,所以可以修改即可,一定可以更新视图 
修改对象类型:
Vue对对象内的所有属性也进行了深度的监听,只要属性发生改变也可以重新渲染
如果在修改对象的属性时,如果出现了无法更新的现象 也可以使用vm.$set()或Vue.set()
我们需要删除的时候 也可以使用Vue.delete()和Vm.$delete()方法删除
-->
  <div id="app">
    <!-- for  列表渲染 遍历每一项 -->
    <ul>
      <li v-for=" item of Date">{{item.name}}-{{item.age}}{{item.sex}}</li>
    </ul>
    <button @click="add">添加属性</button>
    <input type="text" v-model="name">
    <button @click="addOne">修改姓名</button>
    <button @click="increase">增加你的性别</button>
    <p>{{nom.name}}</p>
    <p>{{nom.age}}</p>
    <p>{{nom.sex}}</p>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        // 修改数组类型 js的限制 无法检测中某个值的变化,所以直接修改数组视图不会更新
        Date: [
          { name: '罗飞', age: 20, sex: '男' },
          { name: '王远', age: 20, sex: '男' }
        ],
        nom: { name: '罗飞', age: 70 },
        name: ''
      }

    },
    methods: {
      add() {
        this.Date.push({ name: '李白', age: 24, sex: '男' })
      },
      addOne() {
        // 第一个需要修改的对象 第二个是要修改的属性 第三个值
        Vue.set(this.nom, "name", this.name)
      },
      increase() {
        Vue.set(this.nom, 'sex', '男')
        console.log(this.nom);
      }
    }
  })
</script>

</html>